<template>
  <div class="mask-box">
    <div class="pass-box">
      <img v-if="type=='skip'" class="default-img" src="/static/skipImg.png">

      <img v-if="type=='addEnergy'" class="default-img" src="/static/outEnergy.png">

      <img class="close" src="/static/close.png" @click="closeHandle">

      <div v-if="type=='skip'" class="title">{{config.title}}</div>

      <div v-if="type=='addEnergy'" class="title">{{config.addEnergyTitle}}</div>

      <div v-if="type=='skip'" class="desc">是否花费{{sysConfig.baseSkipCost}}元直接跳过本关</div>

      <div v-if="type=='addEnergy'" class="desc">是否花费{{sysConfig.baseEnergyCost}}元回满体力</div>

      <div  class="btn-box">
        <div class="btn-left" @click="leftClickHandle">暂不需要</div>
        <div class="btn-right" @click="rightClickHandle">确认付款</div>
      </div>
    </div>
  </div>
</template>

<script>
// 过关弹窗 三种类型 图文 图片需要传参，其他两个 默认
import { mapState, mapMutations } from "vuex";
export default {
  props: ["type"],
  data() {
    return {
      config: {
        title: "直接跳过本关",
        desc: "是否花费1元直接跳过本关",
        energyTitle: "体力已经用光",
        energyDesc: "是否花费5元回满体力",
        addEnergyTitle: "补充体力",
        addEnergyDesc: "是否花费5元回满体力"
      }
    };
  },
  computed: {
    ...mapState(["sysConfig"])
  },
  methods: {
    leftClickHandle() {
      this.$emit("leftClick");
    },
    rightClickHandle() {
      this.$emit("rightClick");
    },
    closeHandle() {
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
.mask-box {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 10;
  background: rgba(#000, 0.4);
}
.pass-box {
  box-sizing: border-box;
  width: 590rpx;
  padding: 166rpx 38rpx 40rpx 38rpx;
  background: #000;
  position: absolute;
  background: #fff;
  border-radius: 8rpx;
  text-align: center;
  z-index: 15;
  left: 50%;
  top: 200rpx;
  transform: translateX(-50%);
  // &:after {
  //   width: 260rpx;
  //   height: 260rpx;
  //   background: #fff;
  //   position: absolute;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   top: -84rpx;
  // }
}
.default-img,
.img-box {
  width: 260rpx;
  height: 260rpx;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -84rpx;
}
.img-box {
  width: 240rpx;
  height: 240rpx;
  top: -74rpx;
  border-radius: 50%;
  overflow: hidden;
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.title {
  font-size: 48rpx;
  line-height: 1;
  padding: 42rpx 0;
  text-align: center;
  color: #e55f80;
}
.desc {
  font-size: 30rpx;
  line-height: 1.4em;
  color: #aaaaaa;
  margin-bottom: 42rpx;
}
.btn-box {
  display: flex;
  justify-content: space-between;
}
.btn-left,
.btn-right {
  width: 234rpx;
  height: 84rpx;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3rpx solid #e55f80;
  color: #e55f80;
  border-radius: 4rpx;
  background: #e55f80;
}
.btn-left {
  background: transparent;
}
.btn-right {
  color: #fff;
}
.close {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  width: 48rpx;
  height: 48rpx;
}
</style>
